import './app.scss';
import { ITEM_HEIGHT } from './config';
// import { MAX_ITEM_COUNT } from './config';
import { setCurrentData, setDataSource, reactive } from './reactive';
import { render } from './render';
import { setAnimationFrame } from './utils';

(() => {
  //滚动容器
  const oScroller = document.querySelector('#J_scrollWrapper');
  //列表容器
  const oList = document.querySelector('.list-wrapper');
  //获取响应式数据
  const $state = reactive(oList);

  const init = () => {
    //根据配置初始化数据 参数2数值再大 也只能根据视口高度 渲染8条列表项
    initData(1, 20);
    //渲染视图
    render($state.currentData, $state.paddingSet, oList);

    bindEvent();
  };

  function bindEvent() {
    oScroller.addEventListener('scroll', handleScroll, false);
  }

  function handleScroll() {
    //优化：给滚动事件里的程序做滚动节流操作
    setAnimationFrame(() => {
      //每次滚动条滚动都会重新计算startIndex
      //startIndex = 滚动距离 / 列表项高度
      $state.startIndex = Math.floor(this.scrollTop / ITEM_HEIGHT);

      // console.log(this.scrollTop); //滚动距离(0-140)
      // console.log($state.startIndex); //滚动时计算后的范围是 0-1
    });
  }

  /**
   * 根据数据进行初始化渲染
   */
  function initData(init, count) {
    setDataSource(init, count);
    setCurrentData();

    // console.log($state.dataSource, $state.currentData);
    //打印总数据为用户设定条数的数据，和打印根据可视窗口高度最大承放条数(8)的当前视口列表数据
  }

  init();
})();
